<template>
	<view>
		<swiper class="ex-mall-tab-body" :current="tabCurrentIndex" @change="changeTab" disable-touch :duration="0">
			<swiper-item>
				<scroll-view class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[0].load">
						<index ref="index" @loaded="tabLoaded"></index>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('panel-content-bg-color')]"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[1].load">
						<shoppingcart ref="shoppingcart" @loaded="tabLoaded"></shoppingcart>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('panel-content-bg-color')]"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[2].load">
						<my ref="my" @loaded="tabLoaded"></my>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('page-another-bg-color')]"></view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="ex-mall-tab-bar">
			<view class="ex-mall-tab-bar-list">
				<view class="ex-mall-tab-bar-list-item" v-for="(x, xi) in tabList" :key="xi" @click="clickTab(x)">
					<view v-if="authority && authority === 'business' && xi === 1">
          </view>
          <view v-else>
            <view class="ex-mall-tab-bar-active" v-if="x.selected">
              <view class="ex-mall-tab-bar-active-text">{{x.text}}</view>
              <view class="ex-mall-tab-bar-active-oval"></view>
            </view>
            <view class="ex-mall-tab-bar-active" v-else>
              <view class="ex-mall-tab-bar-active-icon" :class="x.icon"></view>
            </view>
          </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Index from '@/pages/tab/index'
	import Shoppingcart from '@/pages/tab/shoppingcart'
	import My from '@/pages/tab/my'

	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			Index,
			Shoppingcart,
			My
		},
		computed: {
			...mapState(['tabCurrentIndex', 'tabPreviousIndex', 'tabList'])
		},
    data() {
      return {
        authority: '',
      }
    },
		onLoad(options) {
			this.init(options)
		},
		onShow() {
			var tab = this.tabList[this.tabCurrentIndex]
			var refCurrent = this.$refs[tab.name]
			if (refCurrent) {
				// #ifdef H5
				this.replaceRoute(tab)
				// #endif
				refCurrent.show && refCurrent.show()
			}
		},
		onHide() {
			var tab = this.tabList[this.tabCurrentIndex]
			var refCurrent = this.$refs[tab.name]
			refCurrent && refCurrent.hide && refCurrent.hide()
		},
		methods: {
			init(options) {
        this.authority = uni.getStorageSync('authority')

				this.tabList.forEach(x => {
					// 植入属性
					this.$set(x, 'selected', false)
					this.$set(x, 'load', false)
					this.$set(x, 'loaded', false)
				})

				this.$switchTab(options.tab || this.tabList[0].name)
			},
			tabScroll(e) {
				var ref = this.$refs[this.tabList[this.tabCurrentIndex].name]
				ref && ref.scroll && ref.scroll(e)
			},
			tabShow(tab) {
				uni.setNavigationBarTitle({
					title: tab.text
				})

				if (this.tabPreviousIndex !== this.tabCurrentIndex) {
					var refPrevious = this.$refs[this.tabList[this.tabPreviousIndex].name]
					refPrevious && refPrevious.hide && refPrevious.hide()
				}
				var refCurrent = this.$refs[tab.name]
				refCurrent && refCurrent.show && refCurrent.show()

				// 使用this.$router.replace后，不切换tab直接跳转非tab页面，返回tab页面正常。切换其他tab再跳转非tab页面，tab被销毁，无法正常返回tab页面。
				// 解决办法为使用history.replaceState
				// #ifdef H5
				this.replaceRoute(tab)
				// #endif
			},
			tabLoaded(e) {
				var tab = this.findTabByName(e.name)
				tab.loaded = true
				this.tabShow(tab)
			},
			changeTab(e) {
        console.log('changeTab : ' + e.detail.current)
        var tab = this.findTabByName(this.tabList[e.detail.current].name)
        tab.loaded = true
        this.tabShow(tab)
        // return
				// var tab = this.tabList[e.detail.current]
				// this.$switchTab(tab.name)
				// if (tab.loaded) {
				// 	this.tabShow(tab)
				// }
			},
			clickTab(tab) {
        if (tab.name === 'shoppingcart' && this.authority === 'business') return

				if (tab.name === this.tabList[this.tabCurrentIndex].name) return

				if (tab.click) {
					tab.click()
					return
				}

				this.$switchTab(tab.name)
			},
			// #ifdef H5
			replaceRoute(tab) {
				history.replaceState({
					name: tab.name
				}, '', `#/?tab=${tab.name}`)
			},
			// #endif
			findTabByName(name) {
				return this.tabList.filter(x => x.name === name)[0]
			}
		}
	}
</script>

<style lang="scss">

</style>
